<template>
  <div ref="chartRef" :style="{ height, width }" style="margin: 0" />
  <!-- <div class="earth-box">
    <div
      id="bgearth"
      class="earth-js earth-container earth-ready"
      style="width: 500px; height: 500px; margin: 100px auto 0"
    >
      <canvas width="350" height="350" style="width: 350px; height: 350px" />
    </div>
  </div> -->
</template>
<script lang="ts" setup>
import { PropType, ref, Ref, onMounted } from "vue";
// import { useECharts } from "@/hooks/web/useECharts";
import { useECharts } from "@pureadmin/utils";
import "echarts-gl";
import { mapData } from "./data";
import { registerMap } from "echarts";
import earthImage from "@/views/chart/3D/earthopcity.png";
import earthImageSvg from "@/views/chart/3D/earth.svg";
import { earthImg } from "./earthbase64.js";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
  },
  height: {
    type: String as PropType<string>,
    default: "calc(100vh - 78px)"
  }
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

onMounted(async () => {
  // window.addEventListener("earthjsload", function () {
  // new Earth("bgearth", {
  //   location: {
  //     lat: 39.904989,
  //     lng: 116.405285
  //   },
  //   zoom: 3,
  //   light: "none",
  //   transparent: !0,
  //   mapSeaColor: "RGBA(36, 46, 53,0.6)",
  //   mapLandColor: "#2fdbbb",
  //   mapBorderColor: "#5D5D5D",
  //   mapBorderWidth: 0.25,
  //   mapHitTest: !0,
  //   autoRotate: !0,
  //   autoRotateSpeed: 3,
  //   autoRotateDelay: 4e3
  // });

  // window.Earth.dispatchLoadEvent()
  // });
  // return;
  setOptions({
    // backgroundColor: "#fff",
    backgroundColor: "rgba(255,255,255,0.5)",
    globe: {
      // baseTexture: "/src/views/chart/3D/earth.svg",
      // baseTexture: "/src/views/chart/3D/earth.png",
      baseTexture: earthImage,
      shading: "color", //lambert黑夜白天效果，color:无黑夜白天效果。realistic：真实感，光晕效果
      environment: "./starfield.jpg",
      // environment: "#fff",
      transparent: true, // 开启透明效果
      opacity: 0.6, // 设置透明度
      atmosphere: {
        show: false //设置地球外侧大气层
      }
      // width: "100%",
      // height: "100%"
      //光照相关的设置。在 shading 为 'color' 的时候无效。
      // light: {
      //   ambient: {
      //     intensity: 0.1
      //   },
      //   main: {
      //     intensity: 1.5
      //   }
      // }
    },
    series: []
  });
});
</script>

<style lang="scss">
.earth-box {
  // height: 100%;
  // width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: black;
  margin: 0 !important;
}
</style>
